今天想要分享一段自己在專案開發過程中的經驗，以及它帶給我的一些延伸思考。我覺得未來或許對這樣的議題會有不一樣的想法，把這段經驗寫下來，給其他人當作參考，也當作留給自己的紀錄。
雖然說學習軟體開發的過程中會被教導要具備模組化思考的能力，但親身進入開發環境時，發現還真不是想模組化就可以模組化的。
這個狀況是一開始跟其他同事在專案內都有使用到一個 input 檔案按鈕，它的效果是立即上傳圖片，同時在頁面上顯示圖片預覽。在一開始我有先提出說這顆按鈕或許可以先做成共用元件，這樣其他人就可以引入使用。後來其實發生了蠻多的狀況，所以後來又經過蠻多次調整的，不過整體來說，這段過程讓我學習到蠻多經驗的
需要先考慮到以下問題：
<head>
<link rel="stylesheet" href="widget.css">
</head>
<body>
<div id="widget"></div>
<script src="widget.js"></script>
<script>
window.widgetName.config = {
// set option...
}
</script>
</body>
以上是大部分元件使用的寫法：
widget.css 是元件需要用到的樣式
div#widget 是元件在頁面中出現的所在位置，有的元件會使用固定的 id 名稱，有的可以自訂
widget.js 內部主要完成兩件事情：
div#widget 上額外設定會放在 widget.js 外面，通常會採用全域的方式寫入
其他實作可能略有差異，但大致上都是 html, css, js 的結合。如果有在寫 Vue 的話用 SFC (single file component) 會更方便一些。
其實在一開始對於模組 (元件) 的責任範圍還不是很清楚的時候，比較難把模組寫進去。
可以先寫好功能再作封裝的動作，或者顛倒過來，先思考這個元件依賴的變因 (變數) 有哪些？然後再實作元件功能
iThome鐵人賽
看影片追技術